<template>
  <el-container>
    <el-header>
      <el-row >
        <el-button size="mini" round type="primary" @click="saveMapInfo">保存信息</el-button>
        <el-button size="mini" round type="danger" @click="clearAll">清除信息</el-button>
        <span>经纬度: <input type="text" v-model="lnglat" readonly /></span>
      </el-row>
    </el-header>
    <el-main>
      <div id="container" class="app-map-wrapper">
        <div class="map-tool" v-if="mapCompleteStatus">
          <div class="map-tool-operator" v-if="mode === 'full'">
            <el-radio-group v-if="editPolygon" v-model="editChangeStatus"  @change="editChange">
              <el-radio-button label="open">开启编辑</el-radio-button>
              <el-radio-button label="close" >关闭编辑</el-radio-button>
            </el-radio-group>
            <el-color-picker v-if="editPolygon" size="mini" v-model="editPolygonAttrColor" @change="setPolygonAttrColor" />
          </div>
          <div class="map-tool-mode">
            <el-radio-group v-model="editMode" @change="draw">
              <el-radio-button v-if="mode === 'full'" label="polygon">多边形</el-radio-button>
              <el-radio-button label="marker">经纬度</el-radio-button>
              <el-radio-button label="empty" >取消</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { getMapLocationByTarget } from '@/http/AppApi'
import MapUtil from '@/utils/MapUtil'
export default {
  name: 'full-map',
  props: {
    mode: {
      type: String,
      default: 'simple' // full 编辑多边形 simple 获取经纬度
    },
    target: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      AMapUI: null,
      AMap: null,
      map: null,
      mouseTool: null,
      polyEditor: null,
      mapCompleteStatus: false,
      mapCenter: '',
      editPolygonAttr: {
        strokeColor: '#80d8ff',
        strokeOpacity: 0.9,
        fillColor: '#00b0ff',
        fillOpacity: 0.2,
        bubble: true
      },
      editPolygon: null,
      editPolygonAttrColor: '',
      lnglat: '',
      editMarker: null,
      editMode: '',
      editChangeStatus: 'close'
    }
  },
  computed: {},
  watch: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.AMapUI = window.AMapUI
      this.AMap = window.AMap
      let mapConfig = {
        zoom: 13,
        cityName: '信阳',
        center: [114.091104, 32.148489]
      }
      this.map = new AMap.Map('container', mapConfig)
      this.map.on('complete', this.mapLoadComplete)
    },
    addUIs () {
      let map = this.map
      this.AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {
        map.addControl(new BasicControl.LayerSwitcher({
          position: 'lt'
        }))
      })
    },
    mapLoadComplete () {
      this.mapCompleteStatus = true
      this.mapCenter = this.map.getCenter()
      this.addUIs()
      let _this = this
      this.map.plugin(['AMap.MouseTool'], function () {
        _this.mouseTool = new AMap.MouseTool(_this.map)
      })
      if (this.mode === 'full' && this.target) {
        this.drawTarget()
      }
    },
    offAll () {
      // 关闭所有事件
      this.offSelectLngLat()
      this.offDrawPoly()
      this.editMode = 'empty'
    },
    clearAll () {
      // 使用clearMap方法删除所有覆盖物
      // this.map.clearMap();
      // 清除地图上创建的覆盖物与标记
      if (this.editMarker) {
        this.map.remove(this.editMarker)
        this.editMarker = null
      }
      if (this.editPolygon) {
        this.map.remove(this.editPolygon)
        this.editPolygon = null
      }
      if (this.lnglat) {
        this.lnglat = ''
      }
      this.offAll()
      this.closeEditPoly()
    },
    draw (type) {
      if (type) {
        // 关闭编辑多边形
        this.closeEditPoly()
        switch (type) {
          case 'marker':
            this.offDrawPoly()
            this.onSelectLngLat()
            break
          case 'polygon':
            this.offSelectLngLat()
            this.onDrawPoly()
            break
          default:
            this.offAll()
            break
        }
      }
    },
    editChange (data) {
      // 选择开启/关闭编辑多边形
      console.log(data)
      if (data) {
        if (data === 'open') {
          this.openEditPoly()
        }
        if (data === 'close') {
          this.closeEditPoly()
        }
      }
    },
    openEditPoly () {
      // 开启编辑多边形
      if (this.editPolygon) {
        let _this = this
        this.map.plugin(['AMap.PolyEditor'], function () {
          _this.polyEditor = new AMap.PolyEditor(_this.map, _this.editPolygon)
          _this.polyEditor.open()
          // 关闭下方操作按钮
          _this.offAll()
        })
      }
    },
    closeEditPoly () {
      // 关闭多边形
      if (this.polyEditor) {
        this.polyEditor.close()
        this.editChangeStatus = 'close'
      }
    },
    onSelectLngLat () {
      // 打开选择经纬度事件
      this.map.on('click', this.selectLngLat)
    },
    offSelectLngLat () {
      // 关闭选择经纬度事件
      this.map.off('click', this.selectLngLat)
    },
    selectLngLat (e) {
      // 选择经纬度并显示
      let lnglat = e.lnglat.getLng() + ',' + e.lnglat.getLat()
      this.lnglat = lnglat
      let marker = new AMap.Marker({
        position: [e.lnglat.getLng(), e.lnglat.getLat()]
      })
      if (this.editMarker) {
        this.map.remove(this.editMarker)
      }
      this.map.add(marker)
      this.editMarker = marker
    },
    onDrawPoly () {
      // 打开绘画多边形
      this.mouseTool.close(false)
      this.mouseTool.polygon(this.editPolygonAttr)
      this.mouseTool.on('draw', this.createDrawPolygon, this.map)
    },
    offDrawPoly () {
      // 关闭绘画多边形
      this.mouseTool.off('draw', this.createDrawPolygon, this.map)
      this.mouseTool.close(true)
    },
    createDrawPolygon (e) {
      // 画多边形回调
      if (this.editPolygon) {
        this.map.remove(this.editPolygon)
      }
      let path = e.obj.getPath()
      if (path && path instanceof Array) {
        this.map.remove(e.obj)
        this.editPolygonAttr.path = path
        let polygon = new AMap.Polygon(this.editPolygonAttr)
        this.editPolygon = polygon
        this.map.add(this.editPolygon)
      }
    },
    setPolygonAttrColor (color) {
      // 设置多边形颜色
      if (color) {
        this.editPolygonAttrColor = color
        this.editPolygonAttr.fillColor = color
        this.editPolygonAttr.strokeColor = color
        this.editPolygon.setOptions(this.editPolygonAttr)
      }
    },
    saveMapInfo () {
      let mapInfo = {}
      mapInfo.clearStatus = true
      if (this.editMarker) {
        let p = this.editMarker.getPosition()
        // 用来标记某个点
        mapInfo.markPosition = {}
        mapInfo.markPosition.lng = p.lng
        mapInfo.markPosition.lat = p.lat
        // 只用来选择经纬度
        mapInfo.lnglat = {}
        mapInfo.lnglat.lng = p.lng
        mapInfo.lnglat.lat = p.lat
        mapInfo.clearStatus = false
      }
      if (this.editPolygon) {
        let poly = this.editPolygon
        let path = MapUtil.paths2Array(poly.getPath())
        path = JSON.stringify(path).toString()
        mapInfo.polyPathArr = path
        mapInfo.polyColor = poly.getOptions().fillColor
        mapInfo.clearStatus = false
      }
      if (this.target) {
        mapInfo.target = this.target
      }
      this.$emit('appMapCallback', mapInfo)
    },
    drawTarget () {
      if (this.target) {
        let _this = this
        getMapLocationByTarget(this.target).then(resp => {
          if (resp.code && resp.code === '200') {
            let data = resp.data
            if (data && data.mapArea) {
              _this.createTarget(data)
            }
          }
        })
      }
    },
    createTarget (p) {
      // 绘制对象：多边形和点
      if (this.editPolygon) {
        this.map.remove(this.editPolygon)
      }
      if (p) {
        if (p.mapColor) {
          this.editPolygonAttr.fillColor = p.mapColor
          this.editPolygonAttr.strokeColor = p.mapColor
          this.editPolygonAttrColor = p.mapColor
        }
        if (p.mapArea) {
          this.editPolygonAttr.path = JSON.parse(p.mapArea)
          let polygon = new AMap.Polygon(this.editPolygonAttr)
          this.editPolygon = polygon
          this.map.add(this.editPolygon)
        }
        if (p.longitude && p.latitude) {
          let lnglat = [p.longitude, p.latitude]
          let marker = new AMap.Marker({
            position: lnglat
          })
          if (this.editMarker) {
            this.map.remove(this.editMarker)
          }
          this.editMarker = marker
          this.map.add(marker)
          this.map.setCenter(lnglat)
          this.map.setZoom(13)
        }
      }
    }
  }
}

</script>
<style scoped>
.app-map-wrapper {
  height: 600px;
}
.map-tool {
  position: absolute;
  left: 3%;
  bottom: 25px;
  z-index: 999999;
  width: auto;
  height: auto;
}
.map-tool .map-tool-operator {
  width: auto;
  height: auto;
}
.map-tool .map-tool-mode {
  width: auto;
  height: auto;
}
</style>
